import React, {
  useState,
  useEffect,
  useCallback,
} from 'react';

interface InitState {
  Component: React.ComponentType<any>
}

export default (lazyFn: Function) => (
  (props: any) => {
    const [
      state,
      setState
    ] = useState<InitState>({ Component: () => null });

    const onLoad = useCallback(() => {
      lazyFn().then((lazy: any) => {
        setState({ Component: lazy.default || lazy })
      })
    }, []);

    useEffect(onLoad, []);

    return <state.Component {...props} />;
  }
);
